<template>
  <div>
    <div style="margin-bottom:20px;">
        <span>任务类型：</span>
        <a-select v-model="taskID" style="width: 220px">
          <a-select-option v-for="(item,key) in taskIdList" :key="key" :value="item.id" @click="setTypeList(item)">{{item.task_name}}</a-select-option>
        </a-select>
        <span style="padding-left:18px">任务要求：</span>
        <a-select v-model="taskType" style="width: 220px">
          <a-select-option :value="''">全部</a-select-option>
          <a-select-option v-for="(item,key) in taskTypeList" :key="key" :value="key">{{item}}</a-select-option>
        </a-select>
        <span style="padding-left:18px">用户账号：</span>
        <a-input-search
          placeholder="请输入用户账号"
          @search="onSearch"
          enterButton="搜索"
          :loading="searchLoading"
          v-model="searchText"
          style="width:320px;"
          size="default"
      />
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange">
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="action"  slot-scope="text,record"> <a-button  type="primary" @click="checkDetail(record)">审核</a-button> </template>
    </a-table>
    <a-modal title="审核任务" v-model="modalVisible" :width="800" :footer="null" :loading="modalLoding">
      <a-row>
        <a-col :xs="18" :sm="18">
          <detail-list size="small" :col="2">
            <detail-list-item term="用户昵称">{{taskItem.nickname}}</detail-list-item>
            <detail-list-item term="用户账号">{{taskItem.phone}}</detail-list-item>
            <detail-list-item term="任务名称">{{taskItem.task_name}}</detail-list-item>
            <detail-list-item term="领取ID">{{taskItem.id}}</detail-list-item>
            <detail-list-item term="任务要求">{{taskItem.task_type}}</detail-list-item>
            <detail-list-item term="任务进度">{{taskItem.task_num}}/{{taskItem.task_progress}}</detail-list-item>
            <detail-list-item term="提交时间">{{taskItem.task_ok_time}}</detail-list-item>
            <detail-list-item term="任务发布时间">{{taskItem.task_get_time}}</detail-list-item>
          </detail-list>
        </a-col>
        <a-col :xs="6" :sm="6">
          <a-row>
            <a-col :xs="12" :sm="12">
              <div class="text">状态</div>
              <div class="heading" style="color: #0493FE;">待审核</div>
            </a-col>
            <a-col :xs="12" :sm="12">
              <div class="text">奖励积分</div>
              <div class="heading">{{taskItem.task_integral}}</div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-divider style="margin-bottom: 32px"/>
       <a-row>
        <a-col :xs="12" :sm="12">
          <a-card hoverable style="width: 240px" @click="showBigImg">
            <img
              alt="example"
              :src="taskItem.img1_url"
              slot="cover"
            />
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="12">
          <div>默认理由:</div>
          <a-radio-group v-model="successText" style="margin-bottom:20px;margin-top:10px;">
            <a-radio :value="1">
              理由1
            </a-radio>
            <a-radio :value="2">
              理由2
            </a-radio>
            <a-radio :value="3">
              理由3
            </a-radio>
            <a-radio :value="4">
              理由4
            </a-radio>
          </a-radio-group>
          <div>自定义理由:</div>
          <div style="margin-bottom:80px;margin-top:10px;">
            <a-textarea v-model="remark" placeholder="必填" style="resize:none; height:120px;"  maxlength="80"/>
          </div>
          <div style="text-align: center;">
            <a-button @click="passTask('确认审核失败？',2)">审核失败</a-button>
            <a-button @click="passTask('确认审核通过？',1)" type="primary" style="margin-left: 50px;">审核通过</a-button>
          </div>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal class="img_modal" v-model="modalImg" :footer="null" :closable="false" :zIndex="1001" :width="480">
      <a-card hoverable style="width: 480px" @click="showBigImg">
          <img
            alt="example"
            :src="taskItem.img1_url"
            slot="cover"
          />
        </a-card>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { queryTask, taskAudit, taskLists } from '@/api/getData'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'AauditTask',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
        // 表头
        columns: [
            {
            title: '序号',
            dataIndex: 'sort_id'
            },
            {
            title: '领取ID',
            dataIndex: 'id'
            },
            {
            title: '任务ID',
            dataIndex: 'lid'
            },
            {
            title: '用户昵称',
            dataIndex: 'nickname'
            },
            {
            title: '用户账号',
            dataIndex: 'phone'
            },
            {
            title: '任务名称',
            dataIndex: 'task_name'
            },
            {
            title: '奖励积分',
            dataIndex: 'task_integral'
            },
            {
            title: '任务类型',
            dataIndex: 'task_type'
            },
            {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        searchText: '',
        searchStatus: '2',
        modalVisible: false,
        modalImg: false,
        taskItem: {},
        remark: '',
        taskID: '',
        taskType: '',
        taskIdList: [],
        taskTypeList: [],
        successText: 1,
        failText: 1,
        modalLoding: false,
        currentKey: ''
    }
  },
  mounted () {
    this.queryTaskList()
  },
  methods: {
    checkDetail(record){
        this.taskItem = record
        this.list.map((currentValue,index,arr)=>{
          if(record.id == currentValue.id){
            this.currentKey = index
          }
        })
        this.modalVisible = true
    },  
    async queryTaskList(){
        this.tableLoding = true
        await taskLists(1).then(res=>{
          // console.log(res)
          let list  = res.data.list;
          list.unshift({
            'task_name': '全部',
            'id': ''
          })
          this.taskIdList = list
        })
        queryTask(this.pagination.current,this.pagination.pageSize,this.searchText,this.searchStatus,this.taskID,this.taskType).then(res=>{
            this.list = res.data.list
            this.pagination.total = res.data.total
        }).finally(e=>{
            this.tableLoding = false
            this.searchLoading = false
        })
    },
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.queryTaskList()
    },
    onSearch(){
      this.searchLoading = true
      this.queryTaskList()
    },
    setSearchStatus(value){
      this.searchStatus = value
    },
    showBigImg(){
      this.modalImg = true
    },
    setTaskAudit(status){
      // this.modalLoding = true
      taskAudit(this.taskItem.id,status,this.remark).then(res=>{
        console.log(res)
        this.$message.success(res.msg);
        // console.log(this.currentKey)
        // if(this.currentKey<this.list.length-1){
        //   this.this.currentKey++
        //   this.taskItem = this.list[this.currentKey]
        // }else{
        //   this.modalVisible = false
        //   this.queryTaskList()
        // }
      })
    },
    setTypeList(item){
      this.taskTypeList = item.task_type
      this.taskType = ''
    },
    passTask(title,state){
      let that = this
      this.modalLoding = true
      taskAudit(this.taskItem.id,state,this.remark || this.successText).then(res=>{
        console.log(res)
        this.$message.success(res.msg);
        if(this.currentKey<this.list.length-1){
          this.currentKey++
          this.taskItem = this.list[this.currentKey]
        }else{
          this.modalVisible = false
          this.queryTaskList()
        }
      })
    }
  }
}
</script>

<style scoped>
.text {
  color: rgba(0, 0, 0, .45);
}
.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

</style>
